<template>
  <div class="center">
    <div class="main">
      <div class="input">
        <img src="../assets/shoujihao.png" >
        <input type="text" v-model="sjh" placeholder="请输入手机号" maxlength="11">
      </div>
      <div class="input" style="border-bottom:none">
        <input type="text" v-model="yzm" placeholder="请输入验证码" class="yzm" maxlength="6"> <button class="hq" @click="hqyzm()">获取验证码</button>
      </div>
      <div class="input">
        <img src="../assets/mima.png" >
        <input type="password" v-model="mima" placeholder="请输入密码" maxlength="16">
      </div>
      <div class="input">
        <img src="../assets/yonghuming.png" >
        <input type="text" v-model="user" placeholder="请输入您的真实姓名">
      </div>
      <div class="input">
        <img src="../assets/shenfenzheng.png" >
        <input type="text" v-model="sfz" placeholder="请输入您的身份证号" maxlength="18">
      </div>
      <div class="input" style="border-bottom:none">
        <img src="../assets/mingpai.png" >
        <span style="color:#6D6D6D">请上传您的教师资格证照片 （选填）</span>
      </div>

      <el-upload
        class="avatar-uploader"
        action="/file/certificate"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <section class="wmassageMask" v-show="writeMessageShow" >
        <div class="zc">
          <div class="xty">
            <img src="../assets/xty_03.gif" alt="">
          </div>
          <h2>注册成功!</h2>
          <p>恭喜你，成功注册，赶紧去使用吧！</p>
          <button class="btn" @click="dl">立即登录</button>
        </div>
        <img src="../assets/qx.png" alt="" class="qx" @click="qx()">
      </section>

    </div>
    <button class="but" @click="reg()">立即注册</button>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios"
export default {
   data(){
    return{
      sjh:"",
      yzm:"",
      sfz:"",
      user:"",
      mima:"",
      imageUrl: ''    ,
      writeMessageShow:false,
      src:""
    }
  },

  methods:{

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.src = res.data.src
      console.log(this.src)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    dl(){
      this.$router.push("/login")
    },
    qx(){
     this.writeMessageShow = !this.writeMessageShow
    },

    hqyzm(){
      window.console.log(this.sjh)
      axios
       .post('/login/code',{phone: this.sjh})
       .then(function(res){ console.log(res)})
       .catch(function(err){console.log(err);});
    },

    reg(){
      var that = this
      if(this.sjh===""){
        alert("请输入手机号")
      }else if(this.yzm===""){
        alert("请输入验证码")
      }else if(this.mima===""){
        alert("请输入密码")
      }else if(this.user===""){
        alert("请输入姓名")
      }else if(this.sfz===""){
        alert("请输入身份证")
      }else{
        axios
          .post('/login/register',{phone: this.sjh,code:this.yzm,id_card:this.sfz,name:this.user,password:this.mima,certificate:this.src})
          .then(function(res){if(res.data.msg=="注册成功"){that.writeMessageShow = true}console.log(res.data.msg)})
          .catch(function(err){console.log(err);});
      }    
    },
  },
}
</script>
<style scoped>
.zc{width: 78%;height: 260px;margin-left: 11%;background-color: #fff;position: absolute;top: 12rem;text-align: center;border-radius: 10px;}
.zc .xty{width: 172px;height:172px;background-color: #fff;border-radius: 100px;position: absolute;left: 5rem;top: -5.5rem;}
.xty img{width: 120px;height: 120px;margin: 1.6rem;}
.zc h2{margin-top: 6rem;font-weight: initial;}
.zc p{color: #B3B3B3;margin-top: 1rem;}
.btn{width: 40%;background-color: #00B7EE;color: #fff;border: 0;padding: 8px;border-radius: 20px;margin-top: 2rem;}
.qx{width: 35px;height: 35px;margin-top: 30rem;margin-left: 11.8rem;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
 

.center{width:80%;margin: 0 auto;}
.clear{clear: both;}
.main{margin-top: 2rem;}
.input{border-bottom: 1px solid #E8E8E8;padding-bottom: 0.3rem;margin-top: 1.5rem;font-size: 1rem;}
.input span{width: 2rem;display: inline;}
.input img{vertical-align: middle;margin: 0 0.8rem;width:1.5rem ;}
.yzm{text-indent: 2.5rem;border-bottom: 1px solid #E8E8E8;padding-bottom: 0.3rem;}
.hq{outline:none;margin-left: 2rem;font-size: 1rem;background-color: #D62C32;padding:0.2rem 0.6rem;border-radius: 0.5rem;color: #fff; box-sizing: inherit;border: 0;}
input{border:none;outline:none;}
input::-webkit-input-placeholder {/* placeholder字体大小 */font-size:1rem;}
.sc{width: 50%;}
.but{margin-top: 10rem;width: 100%;outline:none;font-size: 1rem;background-color: #D62C32;border-radius: 0.5rem;color: #fff; box-sizing: inherit;border: 0;padding: 0.5rem 0;}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>